Estoy usando un dispositivo que tiene devicePixelRatio de 1 . En el desplazamiento, vuelvo a renderizar el lienzo agregando 1 o -1 a la posición y . Afecta la calidad del renderizado y, lo que es más importante, la posición del renderizado sigue cambiando al desplazarse. Por ejemplo, si renderizo con un espacio de 2px que está entre la línea y el texto, difiere en el desplazamiento. Esto se reproduce solo cuando se desplaza muy ligeramente.
let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); let width = 500; let height = 500; canvas.width = width * devicePixelRatio; canvas.height = height * devicePixelRatio; ctx.scale(devicePixelRatio,devicePixelRatio) let startY = 0; let lineHeight = 30; let offSet = 0.5; let padding = 2; function draw(){ for(let i=0;i<30;i++){ let y = (i*lineHeight)+(startY%lineHeight); ctx.beginPath() ctx.moveTo(250+offSet,y+offSet); ctx.lineTo(250+100+offSet,y+offSet); ctx.stroke(); ctx.font = '20px Arial'; ctx.fillText('text',250+30+offSet,y+offSet-padding); } } draw(); canvas.addEventListener('wheel',()=>{ let wheel = Math.round(event.wheelDeltaY/6); ctx.clearRect(0,0,500,500); startY += wheel; draw(); }); canvas{ width : 500px; height : 500px; border : 1px solid; } <canvas></canvas>¿Cómo puedo arreglar esto?
También puedes ver mi proyecto en codepen .